<template>
  <el-card class="box-card" shadow="never">
    <div slot="header">
      <span>😂每日一句</span>
    </div>
    <div>
      <!-- 居左对齐 -->
      <div class="has-text-left block">{{ tip.content }}</div>
      <!-- 居右对齐，距离5个像素 -->
      <div class="has-text-right mt-5 block">--{{ tip.author }}</div>
    </div>
  </el-card>
</template>

<script>
//第一：导入接口
import { getTodayTip } from "@/api/doubaoApi";

export default {
  name: "TipCard",
  data() {
    return {
      tip: {},
    };
  },
  //第二：页面创建完成时调用方法
  created() {
    this.fetchTodayTip();
  },
  methods: {
    fetchTodayTip() {
      //第三：方法中调用接口，接受传回来的json对象
      getTodayTip().then((response) => {
        const { data } = response;
        this.tip = data;
      });
    },
  },
};
</script>